<template>
  <!--  <section>-->
  <div class="vip-ui" :class="{ mobile }">
    <component
      :is="layout"
      :collapse="collapse"
      :device="device"
      :fixed-header="theme.fixedHeader"
      :show-tabs="theme.showTabs"
    />
<!--    <VipThemeDrawer />-->
<!--    <VipThemeSetting />-->
  </div>
  <!--    <vab-theme-drawer />-->
  <!--    <vab-theme-setting />-->
  <!--    <vab-statistics />-->
  <!--    <el-backtop :bottom="300" :right="200" target="#app .app-main-scroll-wrap" />-->
  <!--  </section>-->
</template>

<script setup lang="ts">
import { useSettingsStore } from '/@/store/modules/settings.ts'
import { convertToCamelCase } from '/@lib/utils/convertToCamelCase.ts'
import { ModalUtil } from '/@lib/utils/modal.ts'
import { useAuthStore } from '/@/store/modules/auth.ts'

defineOptions({
  name: 'Layout',
})

interface ComponentType {
  default: Component;
}

const authStore = useAuthStore()
const { username } = storeToRefs(authStore)
const settingsStore = useSettingsStore()
const { device, collapse, theme } = storeToRefs(settingsStore)
const { toggleDevice, foldSideBar, openSideBar, updateTheme } = settingsStore
const mobile = ref(false)
let oldLayout = theme.value.layout
const visibility = useDocumentVisibility()
const imports = import.meta.glob<ComponentType>('./**/*.vue', { eager: true })
const Components: Record<string, Component> = {}
Object.getOwnPropertyNames(imports).forEach((key: any) => {
  Components[key.replace(/(\/|\.|index.vue)/g, '')] = imports[key].default
})

const layout = computed(() => {
  return Components[convertToCamelCase(`vip-layout-${theme.value.layout}`)]
})

const resizeBody = () => {
  const { width } = useWindowSize()
  mobile.value = width.value - 1 < 992
}

watch(mobile, value => {
  if (value) {
    oldLayout = theme.value.layout
    foldSideBar()
  } else openSideBar()
  theme.value.layout = value ? 'vertical' : oldLayout
  toggleDevice(value ? 'mobile' : 'desktop')
})

onBeforeMount(() => {
  resizeBody()
  window.addEventListener('resize', resizeBody)
  updateTheme()
})

onBeforeUnmount(() => {
  if (mobile) theme.value.layout = oldLayout
  window.removeEventListener('resize', resizeBody)
})

// watch(visibility, (current, previous) => {
//   if (current === 'visible' && previous === 'hidden')
//     ModalUtil.notify(`尊敬的${username.value}，欢迎回来`)
// })
</script>

<style scoped lang="scss">
.el-scrollbar__view.scroll-view {
  overflow: auto;
  //display: flex;
}

.vip-ui {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
</style>
